<template>
    <div
        class="applicationProgress"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="申请服务类 --> 申请进度查询">
            <template slot="cardBody">
                <el-form
                    class="searchForm"
                    ref="searchForm"
                    :model="searchForm"
                    :inline="true"
                    :rules="rules"
                    label-position="right"
                    size="small"
                    label-width="110px"
                >
                    <el-row>
                        <el-form-item label="证件号:" label-position="left" prop="idcard">
                            <el-input placeholder="请输入证件号" v-model="searchForm.idcard"></el-input>
                        </el-form-item>
                        <el-form-item label-position="left" prop="startDate" label="起始日期:">
                            <el-date-picker
                                v-model="searchForm.startDate"
                                type="date"
                                placeholder="请选择起始日期"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                                :picker-options="startOptions"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item prop="endDate" label-position="left" label="结束日期:">
                            <el-date-picker
                                v-model="searchForm.endDate"
                                type="date"
                                placeholder="请选择结束日期"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                                :picker-options="endtOptions"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <div class="elItemBtm">
                                <el-button type="primary" size="small" @click="handleConfirm">查 询</el-button>
                                <el-button type="primary" size="small" @click="handleReset">重 置</el-button>
                            </div>
                        </el-form-item>
                    </el-row>
                </el-form>

                <!-- 查询结果 记录列表展示 -->
                <div class="infoList">
                    <el-table
                        :data="tableData"
                        border
                        stripe
                        header-row-class-name="headerRow"
                        ref="showListTable"
                        class="heard-bg business_table"
                    >
                        <el-table-column label="申请进度">
                            <template slot-scope="scope">{{scope.row.statusNow}}</template>
                        </el-table-column>
                        <el-table-column label="手机号码">
                            <template slot-scope="scope">{{scope.row.mobile}}</template>
                            <template slot-scope="scope">
                                <div
                                    class="text_a"
                                    @click="handlCardInfo(scope.row)"
                                >{{ scope.row.mobile }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="卡号">
                            <template slot-scope="scope">{{scope.row.cardNo}}</template>
                        </el-table-column>
                        <el-table-column label="卡产品名称">
                            <template slot-scope="scope">{{scope.row.chanpingId}}</template>
                        </el-table-column>
                        <el-table-column label="申请日期">
                            <template slot-scope="scope">{{scope.row.createDate}}</template>
                        </el-table-column>
                        <el-table-column label="核准额度">
                            <template slot-scope="scope">{{scope.row.primarylimit}}</template>
                        </el-table-column>
                    </el-table>

                    <el-table
                        :data="tableData1"
                        border
                        stripe
                        header-row-class-name="headerRow"
                        v-show="ifshowpostlist"
                        class="heard-bg business_table"
                    >
                        <el-table-column label="邮寄清单">
                            <el-table-column label="手机号码">
                                <template slot-scope="scope">{{scope.row.phone}}</template>
                            </el-table-column>
                            <el-table-column label="收件人姓名">
                                <template slot-scope="scope">{{scope.row.recipient}}</template>
                            </el-table-column>
                            <el-table-column label="卡号">
                                <template slot-scope="scope">{{scope.row.cardNo}}</template>
                            </el-table-column>

                            <el-table-column label="寄送日期">
                                <template slot-scope="scope">{{scope.row.mailingTime}}</template>
                            </el-table-column>
                            <el-table-column label="寄送单号">
                                <template slot-scope="scope">{{scope.row.mailingNumber}}</template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <!-- <div class="footer">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleChangePage('pre')"
                            :disabled="currentPageIndex <= 0"
                        >上一页</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleChangePage('next')"
                            :disabled="!nextButtonFlag"
                        >下一页</el-button>
                    </div>-->
                    <!-- 话术 -->
                    <div class="hstable_wrap" v-if="speechList.length!=0">
                        <el-table
                            :data="speechList"
                            border
                            stripe
                            header-row-class-name="headerRow"
                            ref="showListTable"
                            class="heard-bg business_table hstable"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                            <el-table-column label="业务话术">
                                <template slot-scope="scope">{{scope.row.content}}</template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { getDictSelectList } from '@/utils/Common';

export default {
    name: 'applicationProgress',
    components: {
        cardComponent,
    },
    data() {
        return {
            pageLoading: false, // 页面loading
            isShowCustomerInfo: false, // 客户信息模块显示控制
            certificateTypeList: [], // 证件类型列表
            applyStatusList: [], // 申请状态列表
            cardHolderList: [], // 主副卡标志列表
            descCanReasonList: [], // 审批原因列表
            customerInfo: { // ---------------------------- 客户信息
                CHINAME: '', // 中文姓名
                KEYTYPE: '', // 证件类型
                CUSTID: '', // 证件号码
                HOMEPHONE: '', // 家庭电话
                BUSIPHONE: '',
                BUSIEXT: '', // 公司电话（分机）
                MOBILEPHONE: '', // 手机
                BUSINAME: '', // 单位名称
                CONNAME1: '', // 联系人1姓名
                CONTEL1: '', // 联系人1电话
                CONNAME2: '', // 联系人2姓名
                CONTEL2: '', // 联系人2电话
            },
            searchForm: {
                idcard: '', // 证件号码
                startDate: moment(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * 365))).format('YYYY-MM-DD'), // 开始日期 默认为当前日期往前六个月
                endDate: moment(new Date()).format('YYYY-MM-DD'), // 结束日期 默认为当前日期

            },
            rules: { // 表单校验规则
                idcard: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
                startDate: moment(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * 180))).format('YYYY-MM-DD'), // 开始日期 默认为当前日期往前六个月
                endDate: moment(new Date()).format('YYYY-MM-DD'), // 结束日期 默认为当前日期
            },
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.searchForm.endDate) {
                        return time.getTime() > new Date(moment(this.searchForm.endDate).format('YYYY-MM-DD')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.searchForm.startDate) {
                        return time.getTime() < new Date(moment(this.searchForm.startDate).format('YYYY-MM-DD')).getTime();
                    }
                },
            },
            tableData: [], // 表格数据

            nextButtonFlag: false, // 下翻页按钮显示 控制阀
            pagingDataList: [], // 翻页上送字段列表
            currentPageIndex: 0, // 当前页索引
            speechList: [],//话术列表
            selectedList: [],
            ifshowpostlist: false,//是否显示寄送清单
            tableData1: [], // 表格项


        };
    },
    computed: {
        ...mapGetters([
            'defaultParams',
            'pinFlag',
            'isCurrentMenuInfo',
        ])
    },
    filters: {
        // 日期格斯转换
        getDate(str) {
            let curStr = '--';
            if (str.trim()) { // 有日期传入
                curStr = moment(str).format('YYYY-MM-DD');
            }
            return curStr;
        },

        // 状态转译
        getTextStatus(val, list) {
            let text = '';
            val += '';
            list.forEach((item) => {
                if (item.code === val) {
                    text = item.label;
                }
            });
            return text;
        },

        // 证件类型转译
        getKetTypeText(val, list) {
            let text = '';
            if (val) {
                list.forEach((item) => {
                    if (item.code === val) {
                        text = item.label;
                    }
                });
            }

            return text;
        },
    },

    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        isCurrentMenuInfo: state => state.menu.isCurrentMenuInfo,
    }),

    mounted() {
        this.getBaseSelectData();
    },

    methods: {

        // 获取下拉选择基础数据
        async getBaseSelectData() {
            // 获取证件类型下拉选择列表
            this.certificateTypeList = await getDictSelectList('IDTYPE', this);
            this.searchForm.IDTYPE = this.certificateTypeList.length ? this.certificateTypeList[0].code : '';

            // 获取申请状态列表 APPSTATUS
            this.applyStatusList = await getDictSelectList('APPSTATUS', this);

            // 获取祝福卡标志列表
            this.cardHolderList = await getDictSelectList('MAFLAG', this);

            // 获取审批原因列表
            this.descCanReasonList = await getDictSelectList('APDEC', this);
            await this.getspeechList();
        },

        // 确定按钮点击处理事件
        handleConfirm() {
            this.pageLoading = true;
            this.$refs.searchForm.validate(async (valid) => {
                if (valid) {
                    // 清空上一次查询的数据
                    this.tableData = [];

                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                    // 跑 3072 交易
                    this.handleGetApplyDataList();
                } else {
                    this.pageLoading = false;
                }
            });
        },
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            var checkParam = {
                'id': this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    } else {
                        const ErrorMessage = `错误码：${res.data.status} ` + `错误信息：${res.data.msg}`;
                        this.$alert(ErrorMessage, '请求异常:', {
                            customClass: 'error', type: 'error',
                        });
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        // 获取申请进度查询记录 -- 跑 9001交易
        handleGetApplyDataList() {
            // 设置请求参数 -- 9001 交易

            const appBody = {
                idcard: this.searchForm.idcard, // 证件类型
                startDate: this.searchForm.startDate, // 起始日期
                endDate: this.searchForm.endDate, //  结束日期

            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            params.body.appHead.tranCode = '9001';
            params.body.appBody = appBody;

            // 跑 3072 交易
            this.$post.common.applystatusqry(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 接口请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 9001');
                    if (result.sysHead.rspCd === '000000') {
                        const list = result.body.appBody.dataList || [];
                        this.tableData = list;

                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },

        async handlCardInfo(row) {
            let mobile = (`${row.mobile}`).trim();
            console.log("mobile************", mobile);

            var checkParam = {
                "pageNum": 0,
                "pageSize": 10,
                "phone": mobile,
                //"phone": '15055667788',
            };
            this.$post.postInfo.getPostList(checkParam).then((res) => {
                console.log("寄送清单查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.ifshowpostlist = true;
                        this.tableData1 = res.data.content.records;
                    }
                }
            });

            // this.MenuId = getBusinessMenuId('/businessSystem/cardDataEnquiry', this.businessMenu);
            // console.log('this.MenuId____', this.MenuId);
            // this.$router.push({ name: 'CardDataEnquiry', path: '/businessSystem/cardDataEnquiry', params: { cardIds: cardIds, id: this.MenuId } });
        },

        // 重置按钮点击事件处理
        handleReset() {
            this.$refs.searchForm.resetFields();
        },
    },
};
</script>
<style lang="scss">
.applicationProgress {
    .el-card.is-always-shadow,
    .el-card.is-hover-shadow:focus,
    .el-card.is-hover-shadow:hover {
        box-shadow: none;
    }
    .customerMessage {
        .el-card__header {
            font-size: 18px;
            font-weight: 600;
            padding: 10px 20px;
        }
    }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.applicationProgress {
    min-height: 100%;
    background-color: #fff;
    // border-radius: 8px;
    overflow: hidden;

    .btnBox {
        margin: 30px;
        text-align: center;
    }

    .customerMessage {
        margin: 30px 0;
        overflow: hidden;

        .infoBox {
            .infoItem {
                margin: 10px 0;

                .el-col {
                    display: flex;

                    .title {
                        width: 160px;
                        text-align: right;
                        padding-right: 10px;
                        color: #666;
                    }

                    .content {
                        flex: 1;
                        text-align: left;
                        color: #333;
                        font-weight: 600;
                    }
                }
            }
        }
    }

    .footer {
        text-align: right;
        margin-top: 30px;
    }
}
</style>
